<template>
  <el-dialog title="入库审核" width="74%" :visible.sync="visible" :center="true">
    <el-row>
      <el-col>单位:{{ company }}</el-col>
      <el-col>日期:{{ date }}</el-col>
    </el-row>
    <el-table :data="reviewHousingData" :border="true" size="mini">
      <el-table-column label="序号" min-width="5%" type="index">
      </el-table-column>
      <el-table-column label="名称" prop="name" min-width="20%"></el-table-column>
      <el-table-column label="物料编码" prop="code" min-width="10%"></el-table-column>
      <el-table-column label="规格/型号" prop="model" min-width="30%"></el-table-column>
      <el-table-column label="单位" prop="unit" min-width="5%"></el-table-column>
      <el-table-column label="数量" prop="number" min-width="5%"></el-table-column>
      <el-table-column label="项目号" prop="project" min-width="25%"></el-table-column>
      <el-table-column label="价税合计" prop="totalPriceTax" v-if="false"></el-table-column>
      <el-table-column label="税率" prop="taxRate" v-if="false"></el-table-column>
      <el-table-column label="未税单价" prop="unitPriceBeforeTax" v-if="false"></el-table-column>
      <el-table-column label="未税金额" prop="amountBeforeTax" v-if="false"></el-table-column>
      <el-table-column label="入库地点" prop="positionId" v-if=false></el-table-column>
    </el-table>
    <el-row>
      <el-col>采购:{{ purchasePerson }}</el-col>
      <el-col>保管:{{ acceptancePerson }}</el-col>
      <el-col>验收:{{ custodian }}</el-col>

      <!--      <el-col>审核:{{ reviewer }}</el-col>-->
    </el-row>
    <el-card shadow="never">
      <div slot="header" class="clearfix">
        <span>审批记录</span>
      </div>
      <el-timeline style="padding: 0 !important;">
        <el-timeline-item
            v-for="(item, index) in processCommentArray"
            :key="index"
            :timestamp=item.taskName placement="top">
          <div class="timelineDiv">
            <h4>{{ item.userId }}&nbsp;:&nbsp;{{ item.message }}</h4>
            <h4>{{ item.time }}</h4>
          </div>
        </el-timeline-item>
      </el-timeline>
    </el-card>
    <el-row>
      <el-col :span="24">
        <el-input type="textarea" size="mini" rows="3" placeholder="请填写处理意见"
                  v-model="approvalComment"></el-input>
      </el-col>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="approvedWarehousing" size="mini">确 认</el-button>
      <el-popover
          placement="top"
          width="500"
          trigger="click" title="选择退回节点" style="padding: 10px">
        <el-table :data="nodes" size="mini" border style="margin: 20px 0 ">
          <el-table-column type="index" width="50" label="序号"></el-table-column>
          <el-table-column min-width="220" property="activityName" label="节点"></el-table-column>
          <el-table-column width="80" property="assignee" label="办理人"></el-table-column>
          <el-table-column min-width="120" label="选择">
            <template slot-scope="scope">
              <el-radio v-model="selectedNodeId" :label="scope.row.activityId"></el-radio>
            </template>
          </el-table-column>
        </el-table>
        <el-button size="mini" type="warning" @click="roolback" style="float: right">退 回</el-button>
        <el-button slot="reference" type="primary" @click="getNodes" size="mini">退 回</el-button>
      </el-popover>
      <el-button type="primary" @click="reviewClose" size="mini">关 闭</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: "ReviewhousingForm",
  data() {
    const user = JSON.parse(localStorage.getItem('user'))
    return {
      company: '赛福斯特',
      purchasePerson: '',
      acceptancePerson: '',
      custodian: user.nickName,
      date: new Date().toISOString().slice(0, 10),
      reviewHousingData: [],
      /*      reviewer:'',*/
      processCommentArray: [],
      approvalComment: '',
      nodes: [],
      selectedNodeId: null,
    }
  },
  computed: {
    visible: {
      get() {
        return this.$store.state.isVisible;
      },
      set(value) {
        this.$store.commit('setIsVisible', value);
      }
    },
  },
  watch: {
    visible(newVal) {
      console.log('Visible changed to: ', newVal);
    }
  },
  methods: {
    approvedWarehousing() {
      const warehousingReviewed = {
        warehousingMaterialDTOS: this.reviewHousingData.map(item => ({
          ...item,
          custodian: this.custodian,
          processInstanceId: item.processInstanceId
          // reviewer: this.reviewer
        })),
        approvalCommentDTO: {
          comment: this.approvalComment
        }
      }
      this.$http.post("/material/approveWarehousing", warehousingReviewed).then((response) => {
        if (response.data.code == 1) {
          this.$message({
            showClose: true,
            message: '入库完成，自动通知申请人',
            type: 'success'
          });
          this.$store.commit('setTaskCompleted', true)
        } else {
          this.$message({
            showClose: true,
            message: '审批失败，请联系管理员',
            type: 'error'
          });
        }
      })
      this.visible = false
    },
    getNodes() {
      const taskId = this.$store.state.taskId
      this.$http.get(`/instance/roolbackNodes/${taskId}`).then((response) => {
        if (response.data.code == 1) {
          this.nodes = response.data.data
          console.log(this.nodes)
        }
      })
    },
    roolback() {
      const rollbackDTO = {
        taskId: this.$store.state.taskId,
        activityId: this.selectedNodeId
      }
      if (!rollbackDTO.activityId) {
        this.$message.error('请选择一个节点进行回退');
        return;
      }
      this.$http.post(`/instance/rollback/`, rollbackDTO).then((response) => {
        if (response.data.code == 1) {
          this.$message({
            showClose: true,
            message: '回退成功',
            type: 'success'
          });
        } else {
          this.$message({
            showClose: true,
            message: '回滚失败，请联系管理员',
            type: 'error'
          });
        }
      })
      this.visible = false
    },
    reviewClose() {
      this.visible = false
    }
  },
  mounted() {
    this.visible = true
    const taskId = this.$store.state.taskId
    this.$http.get(`/material/reviewWarehousing/${taskId}`).then((response) => {
      if (response.data.code == 1) {
        this.reviewHousingData = response.data.data
        this.purchasePerson = this.reviewHousingData[0].purchasePerson
        this.acceptancePerson = this.reviewHousingData[0].acceptancePerson
        /*        this.custodian = this.reviewHousingData[0].custodian*/
        console.log(this.reviewHousingData)
      } else {
        alert("获取入库单数据失败")
      }
    })
    this.$http.get(`/history/comment/${taskId}`).then((response) => {
      if (response.data.code == 1) {
        this.processCommentArray = response.data.data
      }
    })
  }
}
</script>
